<template>
  <el-container class="el-container--privilege">
    <el-container class="el-container--privilege__left">
      <el-main>
        <el-collapse-transition>
          <el-card v-if="searchShow" shadow="never" :body-style="{ padding: '20px 10px 0px 20px' }">
            <el-form v-if="searchShow" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
              <!--文本框-->
              <el-form-item>
                <el-input v-model="dataForm.title" placeholder="填报主题" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getDataList()">{{ $t('query') }}</el-button>
                <el-button @click="searchReset()">{{ $t('reset') }}</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-collapse-transition>
        <el-card shadow="never" class="aui-card--fill" :style="searchShow?'margin-top: 10px;':''">
          <vxe-table :loading="dataListLoading" :data="dataList" highlight-current-row ref="xTable" auto-resize
            remote-sort @sort-change="dataListSortChangeHandle" @cell-dblclick="cellDbClick" class="vxe-table-element">
            <vxe-table-column type="index" width="50" fixed="left" align="center"></vxe-table-column>
            <vxe-table-column field="title" title="填报主题">
            </vxe-table-column>
            <vxe-table-column field="cycleType" title="周期" align="center" width="80">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.cycleType == 'year'" size="small" type="info">年报</el-tag>
                <el-tag v-if="scope.row.cycleType == 'year_half'" size="small" type="info">半年报</el-tag>
                <el-tag v-if="scope.row.cycleType == 'quarterly'" size="small" type="success">季报</el-tag>
                <el-tag v-if="scope.row.cycleType == 'month'" size="small" type="warning">月报</el-tag>
                <el-tag v-if="scope.row.cycleType == 'week'" size="small" type="info">周报</el-tag>
                <el-tag v-if="scope.row.cycleType == 'day'" size="small" type="danger">日报</el-tag>
              </template>
            </vxe-table-column>
            <vxe-table-column title="handle" width="100" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button v-if="$hasPermission('udf:udfFillingTopic:update')" type="text" size="small"
                  icon="el-icon-edit" @click="addBtypeHandle(scope.row)">添加单位</el-button>
              </template>
            </vxe-table-column>
          </vxe-table>
          <el-pagination :current-page="page" :page-sizes="[5, 10, 20, 50, 100]" :page-size="limit" :total="total"
            layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
            @current-change="pageCurrentChangeHandle">
          </el-pagination>
        </el-card>
      </el-main>
    </el-container>
    <el-aside width="400px">
      <el-collapse-transition>
        <el-card v-if="searchShow" shadow="never" :body-style="{ padding: '20px 10px 0px 20px' }">
          <el-form v-if="searchShow" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <!--文本框-->
            <el-form-item>
              <el-input v-model="dataForm.btypeName" placeholder="机构名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getDataList()">{{ $t('query') }}</el-button>
              <el-button @click="searchReset()">{{ $t('reset') }}</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-collapse-transition>
      <el-card shadow="never" class="aui-card--fill" :style="searchShow?'margin-top: 10px;':''">
        <vxe-table :loading="dataListLoading" :data="btypeDataList" highlight-current-row ref="btypeTable" auto-resize
          remote-sort @sort-change="dataListSortChangeHandle" @cell-dblclick="cellDbClick" class="vxe-table-element">
          <vxe-table-column type="index" width="50" fixed="left" align="center"></vxe-table-column>
          <vxe-table-column field="btypeName" title="机构名称">
          </vxe-table-column>
          <vxe-table-column title="handle" width="100" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button v-if="$hasPermission('udf:udfFillingTopic:update')" type="text" size="small"
                icon="el-icon-edit" @click="deleteBtypeHandle(scope.row.id)">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <el-pagination :current-page="page2" :page-sizes="[5, 10, 20, 50, 100]" :page-size="limit2" :total="total2"
          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
        </el-pagination>
      </el-card>
    </el-aside>
    <uni-btype-select v-if="dialogVisible" ref="btypeSelect" @backFun="backFun" :initDataForm="initDataForm"
      :multiple="true">
    </uni-btype-select>
  </el-container>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
// import { isEmpty } from '@/utils/validate'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: 'udf/udfFillingTopic/page',
        getDataListIsPage: true,
        exportURL: 'udf/udfFillingTopic/export',
        deleteURL: '/udf/udfFillingTask'
      },
      page2: 1,
      limit2: 50,
      total2: 0,
      btypeDataList: [],
      dialogVisible: false,
      activeName: '2',
      dataForm: {
        topicId: ''
      }
    }
  },
  watch: {
    // tabs 点击
    'activeName': function (val) {
      if (val === '1') {
        this.$emit('showPrivilegeAudit', val)
      }
    }
  },
  created () {
    this.init()
    this.getDataList()
    this.getBtypeList()
  },
  methods: {
    init () {
      this.$nextTick(() => {
        Promise.all([]).then(() => {
        })
      })
    },
    // 双击单元格
    cellDbClick ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, cell }, event) {
      this.selRole = row
      this.dataForm.topicId = row.id
      this.getBtypeList()
    },
    // 添加机构
    addBtypeHandle (row) {
      this.show(row)
    },
    show (row) {
      this.dialogVisible = true
      this.dataForm.topicId = row.id
      // 等待DOM完成更新 v-if 渲染后执行
      this.$nextTick(() => {
        this.$refs.btypeSelect.init()
      })
    },
    // 选机构回调
    backFun (data) {
      this.dataForm.btypeList = data
      if (data.length === 0) {
        this.$message({
          message: '请选择基金机构',
          type: 'error'
        })
        return
      }
      this.$http['post']('/udf/udfFillingTask/saveBatch', this.dataForm).then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          return false
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.visible = false
            this.$emit('refreshDataList')
          }
        })
      }).catch(() => { })
    },
    // 获取基金机构
    getBtypeList () {
      this.dataListLoading = true
      this.$http.get(
        'udf/udfFillingTask/page',
        {
          params: {
            order: this.order,
            orderField: this.orderField,
            page: this.page2,
            limit: this.limit2,
            ...this.dataForm
          }
        }
      ).then(({ data: res }) => {
        this.dataListLoading = false
        this.btypeDataList = []
        if (res.code !== 0) {
          this.btypeDataList = []
          this.total2 = 0
          return false
        }
        this.btypeDataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
        this.total2 = res.data.total
        if (this.total2 > 0 && Math.ceil(this.total2 / this.limit2) === 1) {
          this.page2 = 1
        }
      }).catch(() => {
        this.dataListLoading = false
      })
    },
    deleteBtypeHandle (id) {
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('delete') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$http.delete(
          `udf/udfFillingTask/`, { 'data': [id] }
        ).then(({ data: res }) => {
          if (res.code !== 0) {
            return
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.getBtypeList()
            }
          })
        }).catch(() => { })
      }).catch(() => { })
    }
  }
}
</script>
<style scoped>
.el-tag--mini {
  margin: 0 2px;
  padding: 0 2px;
  font-size: 10px;
  height: 18px;
  line-height: 18px;
}
</style>
